<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 976px;
            height: 550px;
        }

        .box1 {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100px;
            /* background-color: red; */
        }

        .box .box1 li {
            margin: 0 5px;
            float: left;
            list-style: none;
            width: 10px;
            height: 10px;
            border-radius: 5px;
            background-color: #fff;
        }

        .box .box1 .opop {


            background-color: #fff;
            scale: 1.5;

        }
    </style>
</head>

<body>
    <div class="box">
        <img src="" alt="">
        <div class="box1">
            <p></p>

            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>

        </div>
    </div>
    <script>
        // 1. 初始数据
        const sliderData = [
            { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
            { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
            { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
            { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
            { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
            { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
            { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
            { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
        ]
        const random = parseInt(Math.random() * sliderData.length)
        const nav = document.querySelector('.box img')
        nav.src = `${sliderData[random].url}`
        const box1 = document.querySelector('.box .box1')
        box1.style.backgroundColor = sliderData[random].color
        box1.style.opacity = 0.8
        const ppp = document.querySelector('.box .box1 p')
        ppp.innerHTML = sliderData[random].title
        const li = document.querySelector(`.box .box1 li:nth-child(${random + 2})`)
        li.classList.add('opop')
    </script>
</body>

</html>